<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="productsName" label="产品名称" width="120" />
        <el-table-column prop="productsNumber" label="产品编号" width="160" />
        <el-table-column prop="productsType" label="产品类别" width="120" />
        <el-table-column prop="productsUnit" label="单位" width="100" />
        <el-table-column prop="productsNum" label="规格型号" width="120" />
        <el-table-column prop="price" label="单价" width="100" />
        <el-table-column prop="remark" label="产品说明" width="120" />
        <el-table-column fixed="right" label="操作" min-width="150">
            <template #default="scope">
                <el-button link type="danger" :icon="Delete" size="small" @click="Del(scope.row.productsId)">删除</el-button>
                <el-button link type="warning" :icon="Edit" size="small" @click="Upd(scope.row.productsId)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[15, 20, 25, 30]" layout="total, sizes, prev, pager, next, jumper" :total="form.totalCount"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { Wread, Wwrite } from "@/axios/axiosHelper"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const router = useRouter();

const tableData = ref([]);

const form = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    totalPage: 0,
})

const handleSizeChange = (val: number) => {
    Show();
}
const handleCurrentChange = (val: number) => {
    Show();
}

onMounted(() => {
    Show();
})

const Show = () => {
    axios.get("https://localhost:7095/api/Products/QueryProducts", {
        params: {
            pageIndex: form.pageIndex,
            pageSize: form.pageSize
        }
    })
        .then(res => {
            tableData.value = res.data.data;
            form.totalCount = res.data.totalCount;
            form.totalPage = res.data.totalPage;
        })
        .catch(err => {
            console.log(err);
        })
}


const Del = (productsId: any) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.post("https://localhost:7114/api/Products/DelProducts", {
                productsId: productsId
            })
                .then(res => {
                    if (res.data.code == 100) {
                        ElMessage.success(res.data.msg);
                        Show();
                    }
                    else {
                        ElMessage.error(res.data.msg);
                        return;
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

const Upd = (productsId: any) => {
    router.push({
        path: 'UpdProducts',
        query: { productsId: productsId }
    })
}

</script>